<%@ page language="java"  contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt"	uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<sec:authentication property="principal" var="currentPrincipal" scope="page" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>思德网</title>
<link rel="stylesheet"  href="${ctx.resource}/css/style.css" type="text/css" />


   <script src="${ctx.resource}/js/jquery-1.7.2.min.js"></script>
   <script src="${ctx.resource}/js/vendor/bootstrap.min.js"></script>
   
   	
<script type="text/javascript" src="${ctx.resource}/js/move.js"></script> 
<script>
window.onload=function(){
	tored("ul1");
	tored("ul2");
	tored("ul3");
	tored("ul4");
};


function alertt()
{
	alert("客观别急^_^,此功能正在开发中,即将开放!");
}
</script>

<!--banner js-->

</head>
<%HttpSession s = request.getSession();%>

<body>
<div class="os-2015">

<%@ include file="include/header_Index.jsp"%>

<!--banner-->
<div class="slide-main" >
  <div class="head-box">
  	
    <div class="new-banner" style="position: relative;">
    <ul style="position: absolute; height: 100%;">
  		<li class="banner-background" style="opacity: 1; background-image:url(${ctx.resource}/images/index_slider/banner01.jpg); background-position: 50% 100%;height: 100%;"></li>
  		<li class="banner-background" style="opacity: 1; background-image:url(${ctx.resource}/images/index_slider/banner02.jpg); background-position: 50% 100%;height: 100%;"></li>
  		<li class="banner-background" style="opacity: 1; background-image:url(${ctx.resource}/images/index_slider/banner03.jpg); background-position: 50% 100%;height: 100%;"></li>
  		<li class="banner-background" style="opacity: 1; background-image:url(${ctx.resource}/images/index_slider/banner04.jpg); background-position: 50% 100%;height: 100%;"></li>
  	</ul>
      </div>
    </div>
  </div>
</div>

<!--main-->
<div class="main">
<div class="w" >
<div class="f1">
<span>经济商业类</span>
<!--滚动-->
<div class="slider">

<div class="bd">
	<ul id="ul1">
		<li  onclick="javascript:alertt();" >
            <div class="zhezhaopic">
            <a href="#"><img src="${ctx.resource}/images/index_slider/a.png" /></a></div>
            <h2  class="zhezhao">
            <a href="#"><img src="${ctx.resource}/images/i1.png" width="124" height="124" /></a>
            </h2>
            <div class="pictxt">
          <p class="pictxt-tit"><a >ASDAN商业精英项目</a></p>
          <p><a href="#">对留学申请最有价值的国际修学 （美国  英国  欧洲）</a></p>
          	<!-- Written By Edward 2015-4-18 19:23:36 -->
            <div class="time" style="display: inline-block;">项目时间:2015年：6月29日—8月16日（14天一轮）</div>
            </div>
        </li>
         		<li>
            <div class="zhezhaopic">
            <a href="${ctx}/home/wyef"><img src="${ctx.resource}/images/index_slider/b.png" /></a></div>
            <h2  class="zhezhao">
            <a href="${ctx}/home/wyef"><img src="${ctx.resource}/images/i2.png" width="124" height="124" /></a>
            </h2>
            <div class="pictxt">
          <p class="pictxt-tit"><a href="${ctx}/home/wyef">耶鲁青年经济论坛</a></p>
          <p><a href="${ctx}/home/wyef">超越增长——可持续发展的全球前沿</a></p>
          	<div class="time" style="display: inline-block;">项目时间:2015年：4月18日-19日 5月9-10日  5月30-31日</div>
            </div>
        </li>
		<li   onclick="javascript:alertt();" >
            <div class="zhezhaopic">
            <a href="#"><img src="${ctx.resource}/images/index_slider/c.png" /></a></div>
            <h2  class="zhezhao">
            <a href="#"><img src="${ctx.resource}/images/i3.png" width="124" height="124" /></a>
            </h2>
            <div class="pictxt">
          <p class="pictxt-tit"><a href="#">ASDAN模拟商赛</a></p>
          <p><a href="#">最有意思的商社 / 商学实践课堂</a></p>
          	<div class="time" style="display: inline-block;">项目时间:项目时间:4月30日至5月30日</div>
            </div>
        </li>
        
        					<li   onclick="javascript:alertt();" >
            <div class="zhezhaopic">
            <a href="#"><img src="${ctx.resource}/images/index_slider/d.png" /></a></div>
            <h2  class="zhezhao">
            <a href="#"><img src="${ctx.resource}/images/i3.png" width="124" height="124" /></a>
            </h2>
            <div class="pictxt">
          <p class="pictxt-tit"><a href="#">商业精英项目</a></p>
          <p><a href="#">体验全美最具影响力高中数学竞赛，打造名校理工科专业申请竞争优势。</a></p>
            <div class="time" style="display: inline-block;">项目时间:4月30日至5月30日</div>
            </div>
        </li>
            
	</ul>
</div>

	
</div>

<!--滚动-->
</div>
</div>

<div class="w">
<div class="f1">
<span style="background:url(${ctx.resource}/images/icon06.png) repeat-x center bottom">理工科类</span>
<!--滚动-->
<div class="slider">

<div class="red">
	<ul id="ul2">
		<li   onclick="javascript:alertt();" >
            <div class="zhezhaopic2">
            <a href="#"><img src="${ctx.resource}/images/index_slider/d.png" /></a></div>
            <h2  class="zhezhao2">
            <a href="#"><img src="${ctx.resource}/images/i4.png" width="124" height="124" /></a>
            </h2>
            <div class="pictxt2">
          <p class="pictxt-tit2"><a href="#">“ASDAN(美式)数学竞赛</a></p>
          <p><a href="#">体验美国顶级大学数学竞赛</a></p>
          	 <div class="time" style="display: inline-block;">项目时间:2015年8月22日-23日</div>
            </div>
        </li>
         		<li   onclick="javascript:alertt();" >
            <div class="zhezhaopic2">
            <a href="#"><img src="${ctx.resource}/images/index_slider/e.png" /></a></div>
            <h2  class="zhezhao2">
            <a href="#"><img src="${ctx.resource}/images/i5.png" width="124" height="124" /></a>
            </h2>
            <div class="pictxt2">
          <p class="pictxt-tit2"><a href="#">国际数学竞赛</a></p>
          <p><a href="#">体验全球顶级中学生数学竞赛</a></p>
          	<div class="time" style="display: inline-block;">项目时间:2015年11月15日 哈佛大学 ;2016年11月15日 麻省理工大学</div>
            </div>
        </li>
					<li   onclick="javascript:alertt();" >
            <div class="zhezhaopic2">
            <a href="#"><img src="${ctx.resource}/images/index_slider/f.png" /></a></div>
            <h2  class="zhezhao2">
            <a href="#"><img src="${ctx.resource}/images/i6.png" width="124" height="124" /></a>
            </h2>
            <div class="pictxt2">
          <p class="pictxt-tit2"><a href="#">斯坦福数学中国赛</a></p>
          <p><a href="#">待定</a></p>
         	 <div class="time" style="display: inline-block;">项目时间:待定</div>
            </div>
        </li>
            
	</ul>
</div>

	
</div>

<!--滚动-->
</div>
</div>
<!--<div></div>-->
<div class="w">
<div class="f1">
<span style="background:url(${ctx.resource}/images/icon07.png) repeat-x center bottom">领导力类</span>
<!--滚动-->
<div class="slider">

<div class="yello">
	<ul id="ul3">
		<li   onclick="javascript:alertt();" >
            <div class="zhezhaopic3">
            <a href="#"><img src="${ctx.resource}/images/index_slider/g.png" /></a></div>
            <h2  class="zhezhao3">
            <a href="#"><img src="${ctx.resource}/images/i7.png" width="124" height="124" /></a>
            </h2>
            <div class="pictxt3">
          <p class="pictxt-tit"><a href="#">美国模拟联合国</a></p>
          <p><a href="#">迄今为止对留学申请最有价值的模拟联合国项目</a></p>
          	<div class="time" style="display: inline-block;">项目时间:北美模联  麻省理工模联  芝加哥模联   哈佛模联</div>
            </div>
        </li>
         		<li  onclick="javascript:alertt();" >
            <div class="zhezhaopic3">
            <a href="#"><img src="${ctx.resource}/images/index_slider/h.png" /></a></div>
            <h2  class="zhezhao3">
            <a href="#"><img src="${ctx.resource}/images/i8.png" width="124" height="124" /></a>
            </h2>
            <div class="pictxt3">
          <p class="pictxt-tit3"><a href="#">"丝绸之路"中外探险项目</a></p>
          <p><a href="#">待定</a></p>
          	<div class="time" style="display: inline-block;">项目时间:待定</div>
            </div>
        </li>
					<li  onclick="javascript:alertt();" >
            <div class="zhezhaopic3">
            <a href="#"><img src="${ctx.resource}/images/index_slider/i.png" /></a></div>
            <h2  class="zhezhao3">
            <a href="#"><img src="${ctx.resource}/images/i9.png" width="124" height="124" /></a>
            </h2>
            <div class="pictxt3">
          <p class="pictxt-tit"><a href="#">海南农村志愿者项目</a></p>
          <p><a href="#">待定</a></p>
          	<div class="time" style="display: inline-block;">项目时间:待定</div>
            </div>
        </li>
            
	</ul>
</div>
	
	
</div>

<!--滚动-->
</div>
</div>

<div class="w">
<div class="f1">
<span style="background:url(${ctx.resource}/images/icon08.png) repeat-x center bottom">入校课程项目</span>
<!--滚动-->
<div class="slider">

<div class="blue">
	<ul id="ul4">
		<li  onclick="javascript:alertt();" >
            <div class="zhezhaopic4">
            <a href="#"><img src="${ctx.resource}/images/index_slider/j.png" /></a></div>
            <h2  class="zhezhao4">
            <a href="#"><img src="${ctx.resource}/images/i10.png" width="124" height="124" /></a>
            </h2>
            <div class="pictxt4">
          <p class="pictxt-tit4"><a href="#">CoPE</a></p>
          <p><a href="#">待定</a></p>
            <div class="time" style="display: inline-block;">项目时间:待定</div>
            </div>
        </li>
         		<li  onclick="javascript:alertt();" >
            <div class="zhezhaopic4">
            <a href="#"><img src="${ctx.resource}/images/index_slider/k.png" /></a></div>
            <h2  class="zhezhao4">
            <a href="#"><img src="${ctx.resource}/images/i11.png" width="124" height="124" /></a>
            </h2>
            <div class="pictxt4">
          <p class="pictxt-tit4"><a href="#">AoPE</a></p>
          <p><a href="#">待定</a></p>
            <div class="time" style="display: inline-block;">项目时间:待定</div>
            </div>
        </li>
            
	</ul>
</div>
	
	
</div>

<!--滚动-->
</div>
</div>
</div>

<div class="w" style="margin-top:16px;">
<img src="${ctx.resource}/images/img01.jpg" />
</div>

<iframe src="include/footer_Index.jsp" width="100%" height="510" frameborder="0" >
</iframe>

 <script src="${ctx.resource}/js/vendor/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
	var sWidth = $(".new-banner").width(); //获取焦点图的宽度（显示面积）
	var len = $(".new-banner ul li").length; //获取焦点图个数
	var index = 0;
	var picTimer;

	//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
	$(".new-banner ul").css("width",sWidth * (len));
	$(".new-banner ul li").css("float","left");
	$(".new-banner ul li").css("width",sWidth);
	
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	$(".new-banner").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			showPics(index);
			index++;
			if(index == len) {index = 0;}
		},4000); //此4000代表自动播放的间隔，单位：毫秒
	}).trigger("mouseleave");
	
	//显示图片函数，根据接收的index值显示相应的内容
	function showPics(index) { //普通切换
		var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
		$(".new-banner ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
	}
});
	
</script>
</body>
</html>